<template>
  <div class="box">
      <div class="searchBox">
           <el-input class="searchInput" placeholder="请输入内容" clearable v-model="query"> <el-button @click="search" slot="append" icon="el-icon-search">搜索球馆</el-button></el-input>
      </div>
      <div class="container">
            <div class="stadiumBox" v-for="stadium in stadiumList" :key="stadium.sid">
                 <div class="stadiumPic">
                     <img :src="stadium.picUrl" alt="">
                 </div>
                 <div class="stadiumIntro">
                        <div class="stadiumName">{{stadium.sname}}</div>
                        <div class="stadiumAddress">{{'地址：'+stadium.address}}</div>
                 </div>
                 <div class="button">
                     <el-button size="mini" type="primary" @click="Reserve(stadium.sid)">在线预约</el-button>
                 </div>
            </div>
      </div>
       <Pagination :pageSize="pagination.pageSize" :total="pagination.total" :pageNo="pagination.currentPage" :continues=5 @getPageNo="goToPageNo" />
  </div>
  
</template>

<script>
import {mapGetters} from 'vuex';
import Api from '../../api'
export default {
    data() {
        return {
            stadiumList:[],
             // 分页器参数
            pagination:{
                currentPage:'',
                pageSize:'',
                total:''
            },
            query:'',
        }
    },
    watch:{
        query(newVal,oldVal){
            if(oldVal!==''&&newVal==''){
                this.getStadiumListData();
            }
        }
    },
    methods: {
        // 获取球馆信息
        getStadiumListData(){
            this.$store.dispatch('getStadiumData',this.pagination).then(ok=>{
            if(ok){
                this.stadiumList = this.stadiumListData.data;
                this.pagination = this.stadiumListData.pagination;
            }
        })
        },
        // 跳转到球馆详情页面
        Reserve(sid){
           this.$router.push({path:`reserve`,query:{sid}});
        },
        // 跳转到其他页码回调
        goToPageNo(pageNo){
            this.pagination.currentPage = pageNo;
            this.getStadiumListData();
        },
        // 
        async search(){ 
            if(this.query){
                let {data:res} = await Api.searchStadium({query:this.query,pagination:this.pagination});
                if(res.status !== 200) return this.$message.warning(`抱歉没有找到相关球馆！`);
                this.$message.success(`已为您找到${res.data.pagination.total}个相关球馆！`)
                this.stadiumList = res.data.data;
                this.pagination = res.data.pagination;
            }else{
                this.$message.warning('请输入关键词');
            }
           
        }
    },
    created() {
       this.getStadiumListData();
    },
    computed:{
        ...mapGetters({stadiumListData:'stadiumListData'}),
        ...mapGetters({stadiumListSearchData:'stadiumListSearchData'})
    }
}
</script>

<style lang="less" scoped>
    .box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .searchBox{
        background: rgb(105, 193, 215);
        width: 75%;
        height: 55px;
        text-align: center;
        line-height: 50px;
        border-radius: 5px 5px 0px 0px;
        transition: 0.3s linear 0s;
        .el-input{
            width: 80%;
           
        }
     
    }
    .searchBox:hover{
        background: rgb(82, 162, 194);
    }
     .container{
         position: relative;
         width: 75%;
         height: auto;
         background: rgb(244, 241, 241);
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
     
         .stadiumBox{
             position: relative;
             width: 500px;
             height: 200px;
             background: rgb(222, 231, 234);
             border-radius: 5px;
             margin: 15px 10px ;
             box-shadow: 1px 1px 5px rgb(165, 160, 160);
             transition:0.2s linear 0s;
             .stadiumPic{
                 width: 150px;
                 height: 140px;
                 background: rgb(112, 94, 129);
                 position: absolute;
                 top: 20px;
                 left: 20px;
                 img{
                     width: 100%;
                     height: 100%;
                     border-radius: 5px;
                 }
                 
             }
             .stadiumIntro{
                 width: 300px;
                 height: 140px;
                 background: #eee;
                 position: absolute;
                 left: 175px;
                 top: 20px;
                 border-radius: 7px 7px 0 0;
                 border-bottom: 1px solid rgb(203, 200, 200);
                 .stadiumName{
                     color: rgb(222, 232, 240);
                     font-weight: 600;
                     padding-top: 5px;
                     padding-left: 5px;
                     padding-bottom: 5px;
                     margin-bottom: 5px;
                     font-size: 1.3em;
                     background: rgb(52, 161, 224);
                     border-radius: 7px 7px 0 0;
                 }
                 .stadiumAddress{
                     color: rgb(93, 64, 64);
                     padding-top: 5px;
                     padding-left: 5px;
                 }
             }
             .button{
                 position: absolute;
                 right: 10px;
                 bottom: 5px;
                 .el-button{
                     font-size: 1.0em;
                     font-weight: 600;
                 }
             }
         }
         .stadiumBox:hover{
                background: rgb(195, 201, 231);
                .stadiumIntro{
                          background: rgb(212, 216, 216);
                           .stadiumName{
                                background: rgb(56, 127, 220);
                           }
                }
         }
     }


    }

</style>